<template>
  <div class="app-container">
    <span>id:{{ info.id }}</span>
    <br />
    <span>username:{{ info.username }}</span>
    <br />
    <span>gender:{{ info.gender === false ? '男' : '女' }}</span>
    <br />
    <span>nickname:{{ info.nickname }}</span>
    <br />
    <span>phone:{{ info.phone }}</span>
    <br />
    <span>email:{{ info.email }}</span>
    <br />
    <!--    <span>roles:{{ info.roles }}</span>-->
    <!--    <br />-->
    <!--    <span>accesses:{{ info.accesses }}</span>-->
    <!--    <br />-->
    <span>accesses:{{ info.authorities }}</span>
    <br />
    <span>avatar:</span>
    <img :src="info.avatar" alt="头像" style="width: 80px; height: 80px" />
    <br />
    <span>ip:{{ info.ip }}</span>
    <br />
    <span>rememberMe:{{ info.rememberMe }}</span>
    <br />
    <span>time:{{ info.time }}</span>
    <br />
    <div class="token">token:{{ token }}</div>
    <br />
    <el-button type="primary">Test</el-button>
  </div>
</template>

<script lang="ts">
  import { computed, ComputedRef, defineComponent, onMounted } from 'vue';
  import { useStore } from 'vuex';
  import { Info } from '@/store/modules/account/info';
  import { userService } from '@/services/authorization/User';

  export default defineComponent({
    setup() {
      const store = useStore();
      const info: ComputedRef<Info> = computed(() => store.getters['account/info']);
      const token: ComputedRef<string> = computed(() => store.getters['account/token']);
      onMounted(async () => {
        // await accountService.information();
        // userService
        //   .selectByIds(['1395058139627261953', '1395058139627261953'])
        //   .catch(() => {});
        userService.test1([BigInt('1395058139627261953')]).catch(() => {});
        // userService.test2('[1395058139627261953]').catch(() => {});
      });
      return {
        info,
        token,
      };
    },
  });
</script>
<style scoped>
  .token {
    margin: 0 auto;
    width: 50%;
    word-break: break-word;
  }
</style>
